<template>
  <view class="index-container">
    <!-- 搜索 -->
    <mySearch v-if='searchShow'></mySearch>
    <!-- 搜索 -->
    <!-- 轮播图 S -->
    <swiper class="banner">
      <swiper-item v-for='item in banner' :key='item.id'>
      <navigator url="/pkgGood/detail/detail?id=item.goods_id">
        <image class="img" mode="widthFix" :src="item.image_url"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 轮播图 E -->
    <!-- 通知组件 S -->
    <u-notice-bar :text="notice"></u-notice-bar>
    <!-- 通知组件 E-->
    <!-- 菜单区域 S -->
    <u-grid :border="false" col="5">
  <u-grid-item  v-for="item in channel" :key="item.id" @click='goCate(item.id)'>
      <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
      <text class="menuText">{{item.name}}</text>
  </u-grid-item>
    </u-grid>
    <!-- 菜单区域 E -->


    <!-- 商品分类 S -->
    <view class="goodContainer"   v-for='item in categoryList' :key=item.id>
      
      <view class="titleBox" @click='goCate(item.id)'>
        <text>{{item.name}}</text>
      </view>
      <!-- 商品列表 S-->
      <goodList :list='item.goodsList' :desc="true"></goodList>
      <!-- 商品列表 E-->
    </view>
    <!-- 商品分类 E -->


  </view>
</template>

<script>
  export default {
    data() {
      return {
        banner: [],
        categoryList: [],
        channel: [],
        notice: '',
        searchShow:false
      }
    },
    onLoad() {

    },
    onShow() {
      // 因为在tabBar页面会被缓存,所以每次打开都会执行onShow()
this.getIndexData()
this.searchShow=true//搜索组件就会被创建
    },
    onHide(){
      this.searchShow=false//搜索组件就会销毁
    },
    methods: {
      goCate(id){
        // 在首页中存入分$("#")
        uni.setStorageSync('cateId',id)
        uni.switchTab({
          url:"/pages/cate/cate"
        })
      },
    async  getIndexData() {
        const res = await uni.$http.get('/index/appInfo')
        console.log(res)
          this.banner = res.banner
                this.categoryList = res.categoryList
                this.channel = res.channel
      this.notice= res.notice.map((item,index)=>{
          return (index+1)+'.' + item.content
        }).join(",")
        // // 批量注册
        // Object.keys(res).forEach(keyName=>{
        //   this["keyName"]=res["keyName"]
        // })

      },
    }
  }
</script>

<style lang='scss'>
  .banner {
    .img {
      width: 100%;
    }
  }

  .menuImg {
    width: 80rpx;
  }

  .menuText {
    color: #888;
  }

  .titleBox {
    margin: 10rpx 0;
    background-color: #fafafa;
    padding: 20rpx 0;
    box-sizing: border-box;
    text-align: center;

    text {
      display: inline-block;
      border-bottom: 4rpx solid #409eff;
      color: #333;
      font-size: 28rpx;
    }
  }

  .goodContainer {
    padding: 0 20rpx;
  }
</style>
